<template>
	<view>
		<myhead left="1" txt="注册账号"></myhead>
		<view class="inputList" style="margin-top: 10vw;">
		    <view class="title">手机号码</view>
		    <input placeholder="请输入手机号码" v-model="phone"></input>
		</view>
		<view class="inputList" style="margin-top: 10vw;">
		    <view class="title">姓名</view>
		    <input placeholder="请输入姓名" v-model="name"></input>
		</view>
		<view class="inputList">
		    <view class="title">验证码</view>
			<span class="yzm">
				<input placeholder="请输入验证码" v-model="yzm"></input>
				<view @tap='yzmBtn' class="yzmBtn">{{yzmBtnTxt}}</view>
			</span>
		</view>
		<view class="inputList">
		    <view class="title">密码</view>
		    <input placeholder="请输入密码" password v-model="pass"></input>
		</view>
		<view class="inputList">
		    <view class="title">确认密码</view>
		    <input placeholder="请输入确认密码" password v-model="pass1"></input>
		</view>
		<view class="inputList">
		    <view class="title">邀请码</view>
		    <input placeholder="请输入邀请码" v-model="yqm"></input>
		</view>
		<view class="btn" @tap="zcBtn">
			注册
		</view>
		<view class="xy">
			<view>点击“注册”即代表您同意协议：</view>
			<view>《用户协议》</view>
		</view>
	</view>
</template>

<script>
	const http = require('../../utils/http.js');
	export default {
		data() {
			return {
				phone:null,
				name:null,
				yzm:null,
				pass:null,
				pass1:null,
				yqm:null,
				yzmBtnTxt:'发送验证码',
				yzmBool:true,
				nums:60,
				clock:''
			}
		},
		methods: {
			yzmBtn:function(){
				if(this.yzmBool && this.phone){
					var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
					if (!myreg.test(this.phone)) {
						uni.showToast({
						  title: '请输入正确的手机号码',
						  icon: 'none'
						});
						return false;
					}
					http.get('/api/user/sendSMS', {username: this.phone}).then(res => {
						//console.log(res)
						if (res.code == 200) {
							if(!res.result){
								uni.showToast({
								  title: '验证码验证码已发送至您的手机号',
								  icon: 'none',
								  duration:5000
								});
							}else{
								uni.showToast({
								  title: '验证码：'+res.result,
								  icon: 'none',
								  duration:5000
								});
							}
							this.yzmBool = false; //将按钮置为不可点击
							this.yzmBtnTxt = this.nums+'秒后可重新获取';
							this.clock = setInterval(this.doLoop, 1000); //一秒执行一次
						}
					})
				}else{
					if(!this.yzmBool){
						uni.showToast({
						  title: '请不要重复点击',
						  icon: 'none'
						});
					}
					if(!this.phone){
						uni.showToast({
						  title: '请输入手机号',
						  icon: 'none'
						});
					}
				}
			},
			doLoop:function(){
				if(this.nums > 0){
					this.nums -= 1;
					this.yzmBtnTxt = this.nums+'秒后可重新获取';
				}else{
					clearInterval(this.clock); //清除js定时器
					this.yzmBool = true;
					this.yzmBtnTxt = '发送验证码';
					this.nums = 60; //重置时间
				}
			},
			zcBtn:function(){
				var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
				if (!myreg.test(this.phone)) {
					uni.showToast({
					  title: '请输入正确的手机号码',
					  icon: 'none'
					});
					return false;
				}
				if (!this.name) {
					uni.showToast({
					  title: '请输入姓名',
					  icon: 'none'
					});
					return false;
				}
				if(this.pass && this.pass1){
					if(this.pass !== this.pass1){
						uni.showToast({
						  title: '密码和确认密码必须一致',
						  icon: 'none'
						});
						return false;
					}
				}else{
					uni.showToast({
					  title: '请输入密码和确认密码',
					  icon: 'none'
					});
					return false;
				}
				if (!this.yzm) {
					uni.showToast({
					  title: '请输入验证码',
					  icon: 'none'
					});
					return false;
				}
				var parentCode=''
				if(this.yqm){
					parentCode=this.yqm
				}else{
					uni.showToast({
					  title: '请输入邀请码',
					  icon: 'none'
					});
					return false;
				}
				http.post('/api/user/register', {username: this.phone,password:this.pass,verCode:this.yzm,parentCode:parentCode,nickName:this.name}).then(res => {
					console.log(res)
					if (res.code == 200) {
						uni.showToast({
						  title: res.message,
						  icon: 'none',
						  duration:1000
						});
						setTimeout(function () {
						    uni.navigateBack({
						        delta: 1
						    });
						}, 1000);
					}
				})
			}
		}
	}
</script>

<style>
	.inputList{
		padding: 0 8vw;
		margin-bottom: 6vw;
	}
	.inputList .title{
		margin-bottom: 2vw;
		font-size: 3.6vw;
		color: #999999;
	}
	.inputList input{
		height: 12vw;
		line-height: 12vw;
		border-bottom: 1px solid #F2F2F2;
	}
	.yzm{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.yzm input{
		width: 60%;
	}
	.yzmBtn{
		width: 40%;
		text-align: center;
		color: #24EBA9;
		font-size: 3.8vw;
	}
	.btn{
		width: 84%;
		padding: 4vw 0;
		font-size: 3.5vw;
		border-radius: 1.8vw;
		background-image: linear-gradient(45deg, #24EBA9, #10C7B2);
		color: #FFFFFF;
		text-align: center;
		margin: 0 auto;
		margin-top: 10vw;
	}
	.xy{
		width: 84%;
		margin: 0 auto;
		margin-top: 3vw;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		font-size: 2vw;
		color: #999999;
	}
	.xy>view:nth-child(2){
		color: #24EBA9;
	}
</style>
